<template>
    <div :style="mainStyle" style="background-color:#fafafa" >
        <navigation-bar :title="'确认下单'" :onLeftButtonClick="function(){
        toBack()}" :rightIcon="' '"></navigation-bar>
        <div :style="webStyle">
            <div class="address">
                <text class="code">姓名： {{userInfo.name}}</text>
                <text class="code">手机号： {{userInfo.mobile}}</text>
            </div>
            <text class="desc">注：购买后不支持退款、转让，请确认开课时间和有效期后再提交订单</text>
                <div class="card-user-wrapper" style="flex-direction: row">
                    <image :src="productImage" class="product-img"></image>
                    <!--<text class="name-text" style="flex: 1;">{{itemValue.ex.display_login}}</text>-->
                    <div class="product-left">
                        <text class="product-name">{{productName}}</text>
                        <text class="product-type">{{productType}}</text>
                        <text class="product-price">￥{{productPrice}}</text>
                    </div>
                </div>
            <div class="subtotal">
                <text class="price">￥{{productPrice}}</text>
                <text>小计：</text>
            </div>
            <div class="subtotal">
                <text class="red price">￥{{productPrice}}</text>
                <text>总计：</text>
            </div>
            <div class="border"></div>
        </div>
        <div class="cart">
            <text class="order-price">￥{{productPrice}}</text>

            <wxc-button text="提交订单" type="red"
                        :btn-style="{width:'300px',margin:'0px',height:'70px',borderRadius:'36px', backgroundColor: '#FF7E00'}"
                        @wxcButtonClicked="PlaceOrder"></wxc-button>
        </div>
        <wxc-dialog title="订单确认"
                    :content="errorContent"
                    :show="DialogShow"
                    :single="false"
                    :is-checked="isChecked"
                    :show-no-prompt="true"
                    @wxcDialogCancelBtnClicked="wxcDialogCancelBtnClicked"
                    @wxcDialogConfirmBtnClicked="wxcDialogConfirmBtnClicked"
                    @wxcDialogNoPromptClicked="wxcDialogNoPromptClicked">
        </wxc-dialog>
    </div>
</template>

<style scoped>
    .address{
        width:750px;
        height:147px;
        background-color:#EEEEEE;
        padding:30px;
    }
    .desc{
        font-size:20px;
        color:#999999;
        width:690px;
        margin-left:30px;
        margin-right:30px;
        padding-top:10px;
        padding-bottom:10px;
        border-color:#EEEEEE;
        border-style: solid;
        border-bottom-width: 1px;
    }
    .card-user-wrapper{
        width:750px;
        height:200px;
        padding:30px;
    }
    .product-img{
        width:216px;
        height:154px;
    }
    .product-left{
        width:450px;
        height:154px;
        padding-left:30px;
        padding-top:15px;
        align-content:space-between;
    }
    .product-name{
        color:#434A54;
        height:40px;
        font-size:30px;
    }
    .product-type{
        margin-top: 10px;
        margin-bottom: 10px;
        color: #00BB9A;
        border-radius:16px;
        border-color:#00BB9A;
        border-style: solid;
        border-width: 1px;
        font-size:24px;
        height:45px;
        width:90px;
        padding:6px
    }
    .product-price{
        color:#999999;
        font-size:28px;
        height:35px
    }
    .border{
        width:750px;
        height:2px;
        margin-top:10px;
        margin-bottom:10px;
        background-color:#EEEEEE;
    }
    .subtotal{
        flex-direction:row-reverse
    }
    .red{
        color:#FF0000;
    }
    .price{
        margin-bottom: 20px;
        padding-left:10px;
        padding-right:20px;
    }
    .cart{
        position: fixed;
        width:750px;
        height:120px;
        bottom: 0;
        border-top:1px solid #EEEEEE;
        background-color:#fafafa;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding:30px
    }
    .order-price{
        height:50px;
        font-size:36px;
        color:#FF0000;
        font-weight:bold;
    }
</style>

<script>
  import NavigationBar from './widget/NavigationBar.vue'
  import { getEntryPageStyle } from '../config/Config'
  import event from '../core/net/event'
  import order from '../core/net/order'
  import { Utils, WxcButton,WxcDialog  } from 'weex-ui'
  const modal = weex.requireModule('modal')
  export default {
    components: {
      NavigationBar,
      WxcButton,
      WxcDialog
    },
    data: () => {
      return {
        product:{},
        productImage:'',
        productName:'',
        productPrice:'',
        productType:'',
        mainStyle: {},
        DialogShow:false,
        isChecked:false,
        errorContent:'',
        webStyle: {height: '1334px', width: '750px'},
        userInfo:{}
      }
    },
    computed: {
      userInfo() {
        return this.$store.state.user.userInfo;
      }
    },
    methods: {
      init() {
        if (this.getQuery().product) {
          this.productId = this.getQuery().product
        }
        //
        this.$store.dispatch('initUserInfo', (res) => {
          this.userInfo = res.data
        })
        this.loadProduct();
      },
      loadProduct(){
        event.getProductDesc(this.productId)
          .then((res) => {
            if (res && res.data) {
              this.product = res.data
              this.productPrice = this.product.price
              this.productName = this.product.name
              this.productImage = this.product.image
              this.productType = this.product.type === 'course' ? '视频类' : '测试类'
            }
          })
      },
      wxcDialogCancelBtnClicked () {
        //此处必须设置，组件为无状态组件，自己管理
        this.DialogShow = false;
      },
      wxcDialogConfirmBtnClicked () {
        //此处必须设置，组件为无状态组件，自己管理
        this.DialogShow = false;
        this.StoreOrder()
      },
      wxcDialogNoPromptClicked (e) {
        //此处必须设置，组件为无状态组件，自己管理
        this.isChecked = e.isChecked;
      },
      PlaceOrder(){
        order.placeOrder(this.productId).then((res) => {
            if(res.result === false && res.code === 460){
              modal.toast({
                message: res.data
              });
            }else if(res.result === false && res.code === 462){

            }else{
              this.StoreOrder()
            }
        }).catch((error)=>{

        })
      },
      StoreOrder(){
        order.storeOrder(this.productId).then((res) => {
          if(res.result === false){
            modal.toast({message: res.data});
            return ''
          }
            modal.toast({message: "下单成功"});
        }).catch((error)=>{
            console.log(error)
        })
      }
    },
    created () {
      this.mainStyle = getEntryPageStyle(Utils)
      this.init()
    },
    activated: function () {
      //keep alive
      if (WXEnvironment.platform === 'Web') {
        this.init();
      }
    }
  }
</script>
